<script lang="ts" setup>
import { computed, ref } from 'vue';

interface Props {
	title?: string;
}

defineProps<Props>();

const height = ref(64);

const style = computed(() => {
	// #ifdef MP-WEIXIN
	const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	const systemInfo = uni.getSystemInfoSync();
	// return {
	// 	paddingTop: systemInfo.safeAreaInsets.top * 2.1 + "rpx",
	// 	height: menuButtonInfo.height * 2 || 64 + "rpx",
	// }
	// #endif
	return {
		height: height.value + 'rpx'
	};
});
</script>

<template>
	<view class="x-title-bar" :style="style">
		<slot></slot>
		<view class="x-title-bar-label" v-if="title">{{ title }}</view>
	</view>
</template>

<style lang="scss" scoped>
.x-title-bar {
	display: flex;
	align-items: center;

	&-label {
		font-size: 32rpx;
		color: #fff;
		width: 100%;
		text-align: center;
	}
}
</style>
